<template>
  <div class="main">
    <govheader title="化工产业大脑 · 应急管理"></govheader>
    <govnavigation></govnavigation>
    <el-row
      class="content"
      :gutter="10"
      style="padding-left: 15px; padding-right: 5px"
      v-if="zfNameflag"
    >
      <el-col :span="8" class="content-left">
        <el-col class="box">
          <div class="title"><p>应急预案</p></div>
          <div class="content-body">
            <el-col :span="12">
              <div class="leftTop">
                <div>{{ emergencyPlan.totalQty }}</div>
                <div>总体预案数</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="width: 50%; float: left">
                <div class="top-title">省级预案总数</div>
                <div class="top-value">
                  <span
                    v-for="(i, key) in emergencyPlan.provinceQty"
                    :key="key"
                    :class="
                      i >= 0 ? 'top-value-color' : 'top-value-color-right'
                    "
                  >
                    <p>{{ i }}</p>
                  </span>
                </div>
              </div>
              <div style="width: 50%; float: left">
                <div class="top-title">市级预案总数</div>
                <div class="top-value">
                  <span
                    v-for="(i, key) in emergencyPlan.cityQty"
                    :key="key"
                    :class="
                      i >= 0 ? 'top-value-color' : 'top-value-color-right'
                    "
                  >
                    <p>{{ i }}</p>
                  </span>
                </div>
              </div>
              <div style="width: 50%; float: left">
                <div class="top-title">区县预案数</div>
                <div class="top-value">
                  <span
                    v-for="(i, key) in emergencyPlan.basicLevelQty"
                    :key="key"
                    :class="
                      i >= 0 ? 'top-value-color' : 'top-value-color-right'
                    "
                  >
                    <p>{{ i }}</p>
                  </span>
                </div>
              </div>
              <div style="width: 50%; float: left">
                <div class="top-title">基层预案数</div>
                <div class="top-value">
                  <span
                    v-for="(i, key) in emergencyPlan.countyQty"
                    :key="key"
                    :class="
                      i >= 0 ? 'top-value-color' : 'top-value-color-right'
                    "
                  >
                    <p>{{ i }}</p>
                  </span>
                </div>
              </div>
            </el-col>
            <!-- <div class="plan-body">
              <img src="../../../../assets/img/zf/emergency-plan.png" alt="" width="79px" height="88px">
              <div class="plan-content">
                <div class="plan-title"></div>
                <div class="plan-value"></div>
              </div>
            </div>
            <div class="plan-sub-body">
              <img src="../../../../assets/img/zf/emergency-plan-sub.png" alt="" width="32px" height="35px">
              <div class="plan-sub-title">省级预案总数</div>
              <div class="plan-sub-value">{{emergencyPlan.provinceQty}}</div>
            </div>
            <div class="plan-sub-body" style="margin-top: 10px;">
              <img src="../../../../assets/img/zf/emergency-plan-sub.png" alt="" width="32px" height="35px">
              <div class="plan-sub-title">市级预案总数</div>
              <div class="plan-sub-value">{{emergencyPlan.cityQty}}</div>
            </div> -->
          </div>
        </el-col>
        <el-col class="box">
          <div class="title"><p>隐患概览</p></div>
          <div class="content-body">
            <div class="craft-body">
              <div class="craft-title">隐患总数</div>
              <div class="craft-value">{{ hiddenDanger.total }}</div>
            </div>
            <div class="craft-body" style="margin-left: 15px">
              <div class="craft-title">超期未整改</div>
              <div class="craft-value">{{ hiddenDanger.NRQty }}</div>
            </div>
            <div class="craft-body" style="margin-left: 15px">
              <div class="craft-title">整改率</div>
              <div class="craft-value">{{ hiddenDanger.recRate }}%</div>
            </div>
            <div
              v-show="echarts2ShowFlag"
              id="annular22"
              style="width: 100%; height: 210px"
            ></div>
            <div
              v-show="!echarts2ShowFlag"
              style="
                width: 100%;
                height: 210px;
                color: #909399;
                font-size: 14px;
                text-align: center;
                line-height: 210px;
              "
            >
              暂无数据
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 0px">
          <div class="title"><p>重大隐患</p></div>
          <div class="content-body">
            <div class="index-body">
              <img
                src="../../../../assets/img/industry/zfContingencyManagementTwo/隐患总数@2x.png"
                width="70"
                height="95"
                alt=""
              />
              <div class="index-value">{{ hiddenDanger.majorTotal }}</div>
              <div class="title-content">隐患总数</div>
            </div>
            <div class="index-body">
              <img
                src="../../../../assets/img/industry/zfContingencyManagementTwo/超期未整改@2x.png"
                width="70"
                height="95"
                alt=""
              />
              <div class="index-value">{{ hiddenDanger.majorNRQty }}</div>
              <div class="title-content">超期未整改</div>
            </div>
            <div class="index-body">
              <img
                src="../../../../assets/img/industry/zfContingencyManagementTwo/整改率@2x.png"
                width="70"
                height="95"
                alt=""
              />
              <div class="index-value">{{ hiddenDanger.majorRecRate }}%</div>
              <div class="title-content">整改率</div>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="8"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5)"
      >
        <div style="position: relative">
          <div id="annular11" style="width: 100%; height: 522px"></div>
          <div class="legend-body">
            <div class="legend-content" @click="changeMap('应急队伍')">
              <div class="legend-point" style="background: #008ddd"></div>
              <div class="legend-title">应急队伍</div>
              <div class="legend-value">{{ teamSum }}</div>
            </div>
            <div class="legend-content" @click="changeMap('应急物资仓库')">
              <div class="legend-point" style="background: #9577d3"></div>
              <div class="legend-title">应急物资仓库</div>
              <div class="legend-value">{{ vehicleSum }}</div>
            </div>
          </div>
        </div>
        <div class="box" style="margin-top: 10px; margin-bottom: 0px">
          <div class="title" style="width: 310px">
            <p>区域危化生产风险指数排名</p>
          </div>
          <div class="content-body" id="tableColor">
            <el-table
              ref="table1"
              :data="tableData1"
              style="width: 100%"
              height="188px"
              :cell-style="{ padding: '6px 0px' }"
              :header-cell-style="{
                backgroundColor: '#CADFFF',
                color: '#4A6899',
                padding: '6px 0px',
              }"
              :cell-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="排名"
                width="60"
                align="center"
              ></el-table-column>
              <el-table-column
                property="districtName"
                :show-overflow-tooltip="true"
                label="区域名称"
              ></el-table-column>
              <el-table-column
                property="riskIndex"
                align="center"
                label="危化生产风险指数"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-row :gutter="15">
          <el-col :span="12">
            <div class="box box1" style="position: relative">
              <div class="title title1"><p>应急物资情况</p></div>
              <div class="content-body">
                <div
                  v-show="echarts3ShowFlag"
                  id="annular33"
                  style="width: 100%; height: 174px; z-index: 100"
                ></div>
                <!-- <div v-show="echarts3ShowFlag" class="legend">
                  <div
                    class="legendColor"
                    :style="{ 'background-color': legendColor3 }"
                  ></div>
                  <div>{{ legendValue3 }}</div>
                </div>
                <div v-show="echarts3ShowFlag" class="aperture"></div> -->
                <!-- <div
                  v-show="echarts3ShowFlag"
                  style="
                    overflow: hidden;
                    position: absolute;
                    margin-top: 15px;
                    width: 100%;
                    padding-left: 40px;
                    font-size: 14px;
                  "
                >
                  <div style="float: left; color: #3ffffd">物资总量 :</div>
                  <div style="float: left; color: #e5fbff">
                    &nbsp;&nbsp;{{ emergencyExpertSum }}
                  </div>
                </div> -->
                <div
                  v-show="!echarts3ShowFlag"
                  style="
                    width: 100%;
                    height: 174px;
                    color: #909399;
                    font-size: 14px;
                    text-align: center;
                    line-height: 170px;
                  "
                >
                  暂无数据
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box box1" style="position: relative">
              <div class="title title1"><p>应急物资仓库分布</p></div>
              <div class="content-body yuan">
                <div id="annular44" style="width: 100%; height: 180px"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative">
              <div class="title"><p>应急队伍</p></div>
              <div class="content-body">
                <div style="width: 23%; margin-right: 3%; text-align: center">
                  <div
                    style="
                      font-size: 26px;
                      font-weight: bold;
                      background-image: -webkit-linear-gradient(#fff, #f0c41b);
                      -webkit-background-clip: text;
                      -webkit-text-fill-color: transparent;
                      text-align: center;
                      margin: 40px auto 10px;
                    "
                  >
                    {{ emergencyTeamSum }}
                  </div>
                  <img
                    src="../../../../assets/img/industry/zfContingencyManagementTwo/应急队伍@2x.png"
                    alt=""
                    width="76px"
                    height="96px"
                  />
                  <div
                    style="font-size: 12px; color: #ffffff; text-align: center"
                  >
                    应急队伍
                  </div>
                </div>
                <div style="width: 74%">
                  <div
                    v-show="echarts3ShowFlag"
                    id="annular55"
                    style="width: 100%; height: 240px"
                  ></div>
                  <div
                    v-show="!echarts3ShowFlag"
                    style="
                      width: 100%;
                      height: 240px;
                      color: #909399;
                      font-size: 14px;
                      text-align: center;
                      line-height: 170px;
                    "
                  >
                    暂无数据
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-bottom: 0px">
              <div class="title" style="width: 310px">
                <p>企业危化生产风险指数排名</p>
              </div>
              <div class="content-body" id="tableColor1">
                <el-table
                  ref="table2"
                  :data="tableData2"
                  style="width: 100%"
                  height="188px"
                  :cell-style="{ padding: '6px 0px' }"
                  :header-cell-style="{
                    backgroundColor: '#CADFFF',
                    color: '#4A6899',
                    padding: '6px 0px',
                  }"
                  :cell-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    label="排名"
                    width="60"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    property="entName"
                    :show-overflow-tooltip="true"
                    label="企业名称"
                  ></el-table-column>
                  <el-table-column
                    property="riskIndex"
                    align="center"
                    label="危化生产风险指数"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import 'echarts-gl'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfContingencyManagementTwo',
  data () {
    return {
      selectLegend: '应急队伍',
      zfNameflag: true,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      center: {
        杭州市: [119.539823, 29.870667],
        宁波市: [121.580925, 29.676002],
        温州市: [120.455764, 27.880064],
        嘉兴市: [120.802189, 30.652582],
        湖州市: [119.873415, 30.780146],
        绍兴市: [120.580041, 29.767623],
        金华市: [119.999656, 29.105538],
        衢州市: [118.705947, 28.875889],
        舟山市: [122.233931, 30.231275],
        台州市: [121.117506, 28.682316],
        丽水市: [119.579372, 28.183492],
        舟山群岛新区: [122.233931, 30.231275]
      },
      option1Data: [],
      option1Scatter1Data: [],
      option1Scatter2Data: [],
      option1Scatter3Data: [],
      option1Scatter4Data: [],
      option2XData: [],
      option2Data: [],
      option3XData: [],
      option3Data: [],
      option4Data: [],
      option5Data: [],
      colorList: [
        'rgba(38,153,161,.8)',
        'rgba(222,128,66,.8)',
        'rgba(222,179,92,.8)',
        'rgba(167,219,245,.8)',
        'rgba(28,85,165,.9)',
        'rgba(174, 66, 234, .8)'
      ],
     colorList1: [
        "rgb(109,104,255)",
        "rgb(0,239,254)",
        "rgb(68,215,182)",
        "rgb(255,166,0)",
        "rgb(152,123,255)",
        "rgb(118,190,204)",
      ],
      colorList2: [
        "rgb(4,32,245)",
        "rgb(0,96,255)",
        "rgb(109,212,0)",
        "rgb(254,219,101)",
        "rgb(163,10,235)",
        "rgb(0,135,146)",
      ],
      teamSum: 0,
      vehicleSum: 0,
      emergencyPlan: {
        provinceQty: 0,
        cityQty: 0,
        totalQty: 0,
        basicLevelQty: 0,
        countyQty: 0
      },
      hiddenDanger: {
        majorNRQty: 0,
        majorRecRate: 0,
        majorTotal: 0,
        NRQty: 0,
        recRate: 0,
        total: 0
      },
      emergencyTeamSum: 0,
      emergencyExpertSum: 0,
      echarts2ShowFlag: true,
      echarts3ShowFlag: true,
      echarts5ShowFlag: true,
      table1Interval: null,
      table2Interval: null,
      echarts3Interval: null,
      echarts5Interval: null,
      legendColor3: '',
      legendValue3: '',
      angle3: 0
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    let _this = this
    clearInterval(_this.table1Interval)
    clearInterval(_this.table2Interval)
    clearInterval(_this.echarts3Interval)
    clearInterval(_this.echarts4Interval)
    clearInterval(_this.echarts5Interval)
  },
  methods: {
    getright_table (tableRef) {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    getData () {
      let yesterday = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
      let month = yesterday.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      let day = yesterday.getDate()
      day = day < 10 ? '0' + day : '' + day
      let searchDate = yesterday.getFullYear() + month + day

      this.$http
        .post(`/home/government/emergencyOverview/info`, {
          searchYear: yesterday.getFullYear(),
          searchDate: searchDate
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.emergencyPlan = res.data.emergencyPlan
            this.emergencyPlan.provinceQty = String(
              res.data.emergencyPlan.provinceQty
            )
            this.emergencyPlan.countyQty = String(
              res.data.emergencyPlan.countyQty
            )
            this.emergencyPlan.basicLevelQty = String(
              res.data.emergencyPlan.basicLevelQty
            )
            this.emergencyPlan.cityQty = String(res.data.emergencyPlan.cityQty)
            this.hiddenDanger = res.data.hiddenDanger
            this.tableData1 = res.data.districtRiskIndex
            this.tableData2 = res.data.entRiskIndex
            this.option1Data = res.data.mapsQty
            this.option1Scatter1Data = this.option1Data.map((item) => {
              return this.center[item.cityName].concat(item.teamQty)
            })
            this.option1Scatter2Data = this.option1Data.map((item) => {
              return this.center[item.cityName].concat(item.warehouseQty)
            })
            this.vehicleSum = this.option1Data.reduce((total, item) => {
              return total + Number(item.warehouseQty)
            }, 0)
            this.teamSum = this.option1Data.reduce((total, item) => {
              return total + Number(item.teamQty)
            }, 0)
            this.option2XData = res.data.hiddenDanger.hiddenDangerType.name
            this.option2Data = res.data.hiddenDanger.hiddenDangerType.value
            let num = 0
            res.data.emergencySupplies.forEach((item, index) => {
              if (num === this.colorList1.length) {
                num = 0
              }
              this.option3Data.push({
                name: item.materialCategory,
                value: Number(item.materialQty),
                itemStyle: {
                  color: this.colorList1[num],
                  color1: this.colorList2[num]
                }
              })
              num++
            })
            this.emergencyExpertSum = this.option3Data.reduce((total, item) => {
              return total + Number(item.value)
            }, 0)
            this.option4Data = res.data.emergencyWarehouse.map((item) => {
              return {
                name: item.cityName,
                value: item.warehouseQty
              }
            })

            this.option5Data = res.data.emergencyTeam.map((item) => {
              return {
                name: item.teamCategory,
                value: item.teamQty
              }
            })
            this.emergencyTeamSum = this.option5Data.reduce((total, item) => {
              return total + Number(item.value)
            }, 0)

            this.echarts2ShowFlag = this.option2XData.length > 0
            this.echarts3ShowFlag = this.option3Data.length > 0
            this.echarts5ShowFlag = this.option5Data.length > 0

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()
            this.getright_table('table1')
            this.getright_table('table2')
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    changeMap (legend) {
      if (legend !== this.selectLegend) {
        this.selectLegend = legend
        this.option1.series[1].name = legend
        if (legend === '应急队伍') {
          this.option1.series[1].itemStyle.color = '#008DDD'
          this.option1.series[1].data = this.option1Scatter1Data
        } else if (legend === '应急物资仓库') {
          this.option1.series[1].itemStyle.color = '#9577D3'
          this.option1.series[1].data = this.option1Scatter2Data
        }
        this.myChart1.setOption(this.option1)
      }
    },
    // 浙江省地图
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular11'))
      let uploadedDataURL = require('../zhejiang.json')

      echarts.registerMap('js', uploadedDataURL)
      this.option1 = {
        tooltip: {
          trigger: 'item',
          formatter: function (para) {
            if (para.seriesType === 'map') {
              return (
                para.data.cityName +
                '<br>' +
                '应急队伍 : ' +
                para.data.teamQty +
                '<br>' +
                '应急车辆 : ' +
                para.data.vehicleQty +
                '<br>')
            } else {
              return para.seriesName + ' : ' + para.data[2]
            }
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, // 是否允许缩放
            zoom: 0.9, // 默认显示级别
            layoutSize: '100%',
            layoutCenter: ['50%', '50%'],
            itemStyle: {
              areaColor: '#113D8D',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            label: {
              show: true,
              color: '#ffffff'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: this.option1Data
          },
          {
            name: '应急队伍',
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#008DDD'
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'inside',
                fontSize: 10,
                formatter: function (para) {
                  return para.data[2]
                }
              }
            },
            symbol: 'circle',
            symbolOffset: [0, 20],
            symbolSize: 25,
            data: this.option1Scatter1Data,
            zlevel: 10
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular22'))
      this.option2 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '0%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              lineHeight: 15,
              rotate: 40
            },
            axisLine: {
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            data: this.option2XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '隐患率',
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(2, 198, 255, 1)' },
                { offset: 1, color: 'rgba(2, 198, 255, 0)' }
              ])
            },
            data: this.option2Data
          }
        ]
      }
      this.myChart2.setOption(this.option2)
    },
    renderMyChart3 () {
      var _this = this
      this.myChart3 = echarts.init(document.getElementById('annular33'))
      // let angle = this.angle3 // 角度，用来做简单的动画效果的
      // let value = 80
      // var timerId
      // var outerRidus1 = 0.8
      // var outerRidus2 = 0.85
      var data = []
      var data1 = []

      var seriesOption = [// 最外层圆
        {
          type: 'pie',
          radius: ['65%', '45%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          data: [],
          label: {
            show: false,
            position: 'outside',
            formatter: '{d}%',
            color: '#FFFFFF'
          },
          labelLine: {
            normal: {
              length: 80,
              lineStyle: {
                width: 1
              }
            }
          }
        },
        // 内圆 + 中间文字
        {
          type: 'pie',
          radius: ['50%', '30%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          // z: 10,
          label: {
            show: true,
            position: 'center',
            formatter: () => {
              return '物资总量\r\n' + _this.emergencyExpertSum
            },
            color: '#FFFFFF',
            fontSize: 16,
            lineHeight: 30
          },
          data: [],
          labelLine: {
            show: false
          }
        }
      ]

      for (let i = 0; i < _this.option3Data.length; i++) {
        data.push(
          {
            value: _this.option3Data[i].value,
            name: _this.option3Data[i].name,
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.option3Data[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.option3Data[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          }
        )
        data1.push({
          value: _this.option3Data[i].value,
          name: _this.option3Data[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.option3Data[i].itemStyle.color1 // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.option3Data[i].itemStyle.color // 100% 处的颜色
                  }
                ]
              },
              opacity: 0.5
            }
          }
        }
        )
        // seriesOption.push(json)
      }
      seriesOption[0].data = data
      seriesOption[1].data = data1

      this.option3 = {
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.option3Data.length; i++) {
              total += _this.option3Data[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        series: seriesOption
      }

      // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      // function getCirlPoint (x0, y0, r, angle) {
      //   let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
      //   let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
      //   return {
      //     x: x1,
      //     y: y1
      //   }
      // }
      this.myChart3.setOption(this.option3, true)
      this.autoPlay(_this.myChart3, _this.option3, 'echarts3Interval')
      // this.option3 = this.getPie3D(_this.option3Data, 0.8, '', 30, 250)
      // this.myChart3.setOption(_this.option3)
      // this.bindListen(_this.myChart3, _this.option3, '3', 'echarts3Interval')
    },
    renderMyChart4 () {
      let _this = this
      this.myChart4 = echarts.init(document.getElementById('annular44'))
      var plantCap = this.option4Data
      var colorList = ['#DEBE5B', '#0068AB']
      var datalist = [
        {
          offset: [70, 55],
          symbolSize: plantCap[0].value,
          opacity: 0.95,
          color: colorList[0],
          shadowColor: colorList[0],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20
        },
        {
          offset: [10, 10],
          symbolSize: plantCap[1].value,
          opacity: 0.7,
          color: colorList[1],
          shadowColor: colorList[1],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [40, 20],
          symbolSize: plantCap[2].value,
          opacity: 0.95,
          color: colorList[0],
          shadowColor: colorList[0],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [70, 15],
          symbolSize: plantCap[3].value,
          opacity: 0.7,
          color: colorList[1],
          shadowColor: colorList[1],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [100, 10],
          symbolSize: plantCap[4].value,
          opacity: 0.95,
          color: colorList[0],
          shadowColor: colorList[0],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [30, 50],
          symbolSize: plantCap[5].value,
          opacity: 0.7,
          color: colorList[1],
          shadowColor: colorList[1],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [0, 38],
          symbolSize: plantCap[6].value,
          opacity: 0.95,
          color: colorList[0],
          shadowColor: colorList[0],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [95, 45],
          symbolSize: plantCap[7].value,
          opacity: 0.7,
          color: colorList[1],
          shadowColor: colorList[1],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [0, 70],
          symbolSize: plantCap[8].value,
          opacity: 0.95,
          color: colorList[0],
          shadowColor: colorList[0],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [50, 85],
          symbolSize: plantCap[9].value,
          opacity: 0.7,
          color: colorList[1],
          shadowColor: colorList[1],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        },
        {
          offset: [85, 85],
          symbolSize: plantCap[10].value,
          opacity: 0.95,
          color: colorList[0],
          shadowColor: colorList[0],
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10
        }
      ]
      var datas = []
      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i]
        var itemToStyle = datalist[i]
        datas.push({
          name: item.value + '\n' + item.name,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize / 5,
          label: {
            normal: {
              textStyle: {
                fontSize: 10
              }
            }
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity,
              shadowColor: itemToStyle.shadowColor,
              shadowOffsetX: itemToStyle.shadowOffsetX,
              shadowOffsetY: itemToStyle.shadowOffsetY,
              shadowBlur: itemToStyle.shadowBlur
            }
          }
        })
      }
      this.option4 = {
        backgroundColor: 'transparent',
        tooltip: {
          /* 返回需要的信息 */
          formatter: function (param) {
            // console.log(param);
            var value = param.name.split('\n')
            if (value[0] / 5 < 32) {
              return (
                '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;"> ' +
                value[1] +
                ':<br/>' +
                value[0] +
                '</div>'
              )
            } else {
              return ''
            }
          }
        },
        grid: {
          show: false,
          top: 10,
          bottom: 10
        },
        xAxis: [
          {
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
          }
        ],
        series: [
          {
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: function (para) {
                  let num = para.name.split('\n')[0] / 5
                  if (num > 32) {
                    return para.name
                  } else {
                    return ''
                  }
                },
                color: '#fff',
                textStyle: {
                  fontSize: '10'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#00acea'
              }
            },
            data: datas
          }
        ]
      }
      this.myChart4.setOption(this.option4)
      this.autoPlay(_this.myChart4, _this.option4, 'echarts4Interval')
    },
    renderMyChart5 () {
      let _this = this
      this.myChart5 = echarts.init(document.getElementById('annular55'))
      this.option5 = {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        color: [
          '#00A3FF',
          '#00DBD4',
          '#A885F0',
          '#5F83FF',
          '#65D77B',
          '#A5C32B',
          '#F3A52A',
          '#F7702E'
        ],
        legend: {
          right: '10px',
          top: '50px',
          bottom: '10px',
          type: 'scroll',
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
          padding: 10,
          orient: 'vertical',
          textStyle: {
            color: '#ffffff'
          },
          formatter: function (params) {
            let str = ''
            _this.option5Data.forEach((item) => {
              if (item.name === params) {
                str = params + ' ' + item.value + '支'
              }
            })
            return str
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['25%', '55%'],
            roseType: 'area',
            label: {
              show: false
            },
            data: this.option5Data
          }
        ]
      }
      this.myChart5.setOption(this.option5)
      this.autoPlay(this.myChart5, this.option5, 'echarts5Interval')
    },
    autoPlay (myChart, option, timer) {
      var _this = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(_this[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        // **解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this[timer] = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'statistics-warning-row'
      } else {
        return ''
      }
    },
    getPie3D (pieData, internalDiameterRatio, title, alpha, distance) {
      // internalDiameterRatio:透明的空心占比
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          name:
            typeof pieData[i].name === 'undefined'
              ? `series${i}`
              : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          },
          center: ['10%', '50%']
        }

        if (typeof pieData[i].itemStyle !== 'undefined') {
          let itemStyle = {}
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        )
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      let boxHeight = this.getHeight3D(series, 40) // 通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: '10px',
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== 'mouseoutSeries' &&
              params.seriesName !== 'pie2d'
            ) {
              // let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
              //   100).toFixed(2);
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value}个`
              )
            }
          }
        },
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 2
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, // 圆环的高度
          viewControl: {
            // 3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, // 角度
            distance: distance, // 调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false // 自动旋转
          }
        },
        series: series
      }
      return option
    },

    // 获取3d丙图的最高扇区的高度
    getHeight3D (series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value
      })
      return (height * 25) / series[0].pieData.value
    },

    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2
      let startRadian = startRatio * Math.PI * 2
      let endRadian = endRatio * Math.PI * 2
      let midRadian = midRatio * Math.PI * 2
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.2 : 1
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u)
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
        }
      }
    },

    fomatFloat (num, n) {
      var f = parseFloat(num)
      if (isNaN(f)) {
        return false
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
      var s = f.toString()
      var rs = s.indexOf('.')
      // 判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + n) {
        s += '0'
      }
      return s
    },

    bindListen (myChart, option, num, timer) {
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      let that = this
      let flag = true
      // let selectedIndex = '';
      let hoveredIndex = ''
      let seriesIndex = 0
      let seriesName = ''
      let dataIndex = 0
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on('mouseover', function (params) {
        clearInterval(that[timer])
        flag = false
        seriesIndex = params.seriesIndex
        seriesName = params.seriesName
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = option.series[hoveredIndex].pieStatus.selected
            isHovered = false
            startRatio = option.series[hoveredIndex].pieData.startRatio
            endRatio = option.series[hoveredIndex].pieData.endRatio
            k = option.series[hoveredIndex].pieStatus.k
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                option.series[hoveredIndex].pieData.value
              )
            option.series[hoveredIndex].pieStatus.hovered = isHovered
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = ''
          }
          isSelected = option.series[seriesIndex].pieStatus.selected
          isHovered = true
          startRatio = option.series[seriesIndex].pieData.startRatio
          endRatio = option.series[seriesIndex].pieData.endRatio
          k = option.series[seriesIndex].pieStatus.k
          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          option.series[seriesIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[seriesIndex].pieData.value + 5
            )
          option.series[seriesIndex].pieStatus.hovered = isHovered
          that['legendColor' + num] =
            option.series[seriesIndex].itemStyle.color
          that['legendValue' + num] =
            option.series[seriesIndex].name +
            ' : ' +
            (
              (option.series[seriesIndex].pieData.endRatio -
                option.series[seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2) +
            '%'
          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = seriesIndex
          myChart.setOption(option)
        }
      })
      var chartHover = function () {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (seriesIndex === option.series.length) {
          seriesIndex = 0
        }
        if (hoveredIndex !== '') {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = option.series[hoveredIndex].pieStatus.selected
          isHovered = false
          startRatio = option.series[hoveredIndex].pieData.startRatio
          endRatio = option.series[hoveredIndex].pieData.endRatio
          k = option.series[hoveredIndex].pieStatus.k
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[hoveredIndex].pieData.value
            )
          option.series[hoveredIndex].pieStatus.hovered = isHovered
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = ''
        }
        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        isSelected = option.series[seriesIndex].pieStatus.selected
        isHovered = true
        startRatio = option.series[seriesIndex].pieData.startRatio
        endRatio = option.series[seriesIndex].pieData.endRatio
        k = option.series[seriesIndex].pieStatus.k
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        option.series[seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            option.series[seriesIndex].pieData.value + 5
          )
        option.series[seriesIndex].pieStatus.hovered = isHovered
        that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
        that['legendValue' + num] =
          option.series[seriesIndex].name +
          ' : ' +
          (
            (option.series[seriesIndex].pieData.endRatio -
              option.series[seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2) +
          '%'
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = seriesIndex
        // 使用更新后的 option，渲染图表
        myChart.setOption(option)
        seriesIndex++
      }
      // 修正取消高亮失败的 bug
      myChart.on('globalout', function () {
        if (!flag) {
          that[timer] = setInterval(chartHover, 5000)
          flag = true
        }
      })
      that[timer] = setInterval(chartHover, 5000)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background: #041565;
}
.box {
  background-image: url("../../../../assets/img/industry/zfParkOverviewDetailTwo/数据框@2x.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 10px;
  margin-bottom: 10px;
}
.box1 {
  background-image: url("../../../../assets/img/industry/zfParkOverviewDetailTwo/数据框2@2x.png");
}
.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;

  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.title1 {
  width: 220px;
}
.leftTop {
  width: 80%;
  height: 160px;
  margin: 0 auto;
  background-image: url("../../../../assets/img/industry/数据背景框@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #e5fbff;
  text-align: center;
  font-weight: 600;
  > div:first-child {
    font-size: 28px;
    background: -webkit-linear-gradient(90deg, #ffca12, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 50px;
  }
  > div:last-child {
    margin-top: 60px;
  }
}
.top-value {
  font-size: 28px;
  font-weight: 600;
  height: 55px;
  color: #ffffff;
  display: inline-block;
  margin: 10px auto 0;
  // float: right;
  width: 100%;
  text-align: center;
  text-align: right;
}
.top-title {
  width: 100%;
  font-size: 14px;
  color: #e5fbff;
  float: left;
  margin-top: 6px;
  text-align: center;
  text-align: right;
}
.top-value-color {
  p {
    display: inline;
    color: #ffffff;
    background-image: -webkit-linear-gradient(#fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  background-image: url("../../../../assets/img/industry/number.png");
  background-size: 100% 100%;
  display: inline-block;
  padding: 8px;
}
.top-value-color-right {
  p {
    display: inline;
    background-image: -webkit-linear-gradient(#fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  display: inline-block;
  padding: 8px;
}
.content {
  width: 100%;
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.index-body {
  width: 31%;
  margin-top: 25px;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  .title-content {
    margin-top: 20px;
    color: #00e4ff;
    font-size: 13px;
    line-height: 15px;
  }
  .index-value {
    width: 100%;
    margin-top: -10px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    background-image: -webkit-linear-gradient(#fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.plan-body {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  height: 110px;
  width: 55%;
  margin-right: 3%;
  margin-left: 1%;
  img {
    float: left;
    margin-top: 10px;
    margin-left: 13px;
  }
  .plan-content {
    float: left;
    padding-top: 25px;
    padding-left: 30px;
  }
  .plan-title {
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    color: #00a3ff;
  }
  .plan-value {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #4b5463;
  }
}
.plan-sub-body {
  width: 40%;
  height: 50px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  img {
    float: left;
    margin-top: 8px;
    margin-left: 13px;
  }
  .plan-sub-title {
    float: left;
    margin-left: 10px;
    line-height: 50px;
    font-size: 12px;
    color: #4b5463;
  }
  .plan-sub-value {
    float: left;
    margin-left: 10px;
    line-height: 50px;
    font-weight: 600;
    color: #00a3ff;
    font-size: 24px;
  }
}
.craft-body {
  width: 31%;
  background: #022b7e;
  overflow: hidden;
  line-height: 20px;
  padding: 5px 10px;
  .craft-title {
    float: left;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
  }
  .craft-value {
    float: left;
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
    text-align: center;
    background-image: -webkit-linear-gradient(#fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30%;
  cursor: pointer;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #00e4ff;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
      background-image: -webkit-linear-gradient(#fff, #f0c41b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
// /deep/ .table-row1 {
//   background-color: #EBF3FF;
// }
// /deep/ .table-row2 {
//   background-color: #D6E6FF;
// }
// /deep/ .gutter {
//   background-color: #CADFFF;
// }
// /deep/ .el-table__body-wrapper {
//   background-color: rgb(234, 242, 255);
// }
// /deep/ .el-table__body .is-center .cell {
//   padding-left: 0;
//   padding-right: 0;
// }

.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row {
  background-color: #00155a !important;
}
.content-body /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff !important;
    }
  }
}
.content-body /deep/ .el-table th.is-leaf,
.content-body /deep/ .el-table td {
  border: 0;
}
.content-body /deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
#tableColor /deep/ .el-table__body,
#tableColor1 /deep/ .el-table__body {
  width: 100% !important;
}
.legend {
  position: absolute;
  bottom: 10px;
  left: 5%;
  color: #a1e2ff;
  text-align: center;
  overflow: hidden;
  > div {
    float: left;
  }
}
.legendColor {
  width: 20px;
  height: 12px;
  line-height: 14px;
  border-radius: 3px;
  vertical-align: bottom;
}
.legend div:nth-child(2) {
  width: 170px;
  font-size: 12px;
  margin-left: 5px;
  text-align: left;
}
.aperture {
  position: absolute;
  top: 41%;
  left: 50%;
  margin-left: -26%;
  width: 52%;
  height: 82px;
  line-height: 20px;
  text-align: center;
  background-image: url("../../../../assets/img/industry/aperture.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.yuan {
  width: 92%;
  margin: 0 auto;
  background-image: url("../../../../assets/img/industry/zfContingencyManagementTwo/圆环背景@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
